<template>
  <div>
    <el-button
      type="primary"
      style="margin-top: 20px; margin-left: 20px; margin-bottom: 20px"
      @click="addDept"
      >添加部门</el-button
    >

    <el-table :data="form">
      <el-table-column fixed prop="deptId" label="部门id"> </el-table-column>
      <el-table-column prop="deptName" label="部门名字"> </el-table-column>
      <el-table-column prop="leader" label="部门领导"> </el-table-column>
      <el-table-column prop="phone" label="联系电话"> </el-table-column>
      <el-table-column prop="email" label="联系邮箱"> </el-table-column>
      <el-table-column prop="createBy" label="创建人"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="handleClickEdit(scope.row)"
            type="primary"
            size="small"
            >编辑</el-button
          >
          <el-button
            @click="handleClickdelete(scope.row)"
            type="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出修改框 -->
    <el-dialog
      title="编辑部门"
      :visible.sync="dialogFormVisible"
      close-on-click-modal="true"
      :before-close="handleClose"
    >
      <el-form :model="deptInfo">
        <el-form-item label="部门名字" :label-width="formLabelWidth">
          <el-input v-model="deptInfo.deptName"></el-input>
        </el-form-item>
        <el-form-item label="部门领导" :label-width="formLabelWidth">
          <el-input v-model="deptInfo.leader"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="deptInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" :label-width="formLabelWidth">
          <el-input v-model="deptInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="deptInfo.createBy" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(form)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹出添加部门框 -->
    <el-dialog
      title="添加部门"
      :close-on-click-modal="false"
      :visible.sync="insertDept"
    >
      <el-form :model="deptInfo" :rules="rules" ref="deptForm">
        <el-form-item
          label="部门名字"
          prop="deptName"
          :label-width="formLabelWidth"
        >
          <el-input v-model="deptInfo.deptName"></el-input>
        </el-form-item>
        <el-form-item
          label="部门领导"
          prop="leader"
          :label-width="formLabelWidth"
        >
          <el-input v-model="deptInfo.leader"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="phone"
          :label-width="formLabelWidth"
        >
          <el-input v-model="deptInfo.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="联系邮箱"
          prop="email"
          :label-width="formLabelWidth"
        >
          <el-input v-model="deptInfo.email"></el-input>
        </el-form-item>
        <el-form-item
          label="创建人"
          prop="createBy"
          :label-width="formLabelWidth"
        >
          <el-input v-model="deptInfo.createBy"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertDept = false">取 消</el-button>
        <el-button type="primary" @click="add(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDeptAll, updeteDept, createDept, deleteDept } from '@/api/dept';
import { reactive, ref } from 'vue';
export default {
  created() {
    // 获取整个部门
    this.getDeptList();
  },
  data() {
    const validatePhone = (rules, value, callback) => {
      console.log(value);
      if (value === undefined) {
        console.log(111);
        callback(new Error('请输入手机号码'));
      } else {
        console.log(2222);
        if (value.length !== 11) {
          callback(new Error('请输入正确的手机号码格式'));
        } else {
          callback();
        }
      }
    };
    return {
      form: [],
      dialogFormVisible: false,
      insertDept: false,
      formLabelWidth: '120px',
      deptInfo: [],
      rules: {
        deptName: [
          { required: true, message: '请输入部门名字', trigger: 'blur' },
        ],
        leader: [
          { required: true, message: '请输入领导名字', trigger: 'blur' },
        ],
        email: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }],
        createBy: [
          { required: true, message: '请输入创建人名字', trigger: 'blur' },
        ],

        phone: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePhone,
          },
        ],
      },
    };
  },
  methods: {
    getDeptList() {
      getDeptAll().then((resp) => {
        this.form = resp.data;
      });
    },
    handleClickEdit(row) {
      // 开启弹窗
      this.dialogFormVisible = true;

      this.deptInfo = row;
    },
    edit() {
      updeteDept(this.deptInfo).then((resp) => {
        this.dialogFormVisible = false;
        console.log(resp);
      });
    },
    handleClose() {
      console.log(123);
    },
    addDept() {
      this.insertDept = true;
      this.deptInfo = {};
    },
    add() {
      this.$refs.deptForm.validate((valid) => {
        if (valid) {
          createDept(this.deptInfo).then((resp) => {
            this.$message({
              message: resp.data,
              type: 'success',
            });
            this.insertDept = false;
            this.getDeptList();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 删除部门
    handleClickdelete(row) {
      deleteDept(row.deptId).then((resp) => {
        this.$message({
          message: resp.data,
          type: 'success',
        });
        this.getDeptList();
      });
    },
  },
};
</script>
